<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置</title>
    <link rel="icon" type="images/x-icon" href="img/icons/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/setting.css">
    <link rel="stylesheet" href="css/editor.css">
    <link rel="stylesheet" href="css/dialog.css">
</head>
<body>
<!--头部 开始-->
<div class="SY-header pf">
    <div class="clearfix">
        <div class="SY-logo fl usn">
            <a href="UserCenter.html"><img src="img/icons/logo.png" alt="深夜学院"><span class="slogin">深夜研习社</span></a>
        </div>
        <div class="SY-search pa dib">
            <div class="inputField">
                <input type="text" class="SY-input tac" placeholder="请输入作者名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入作者名'">
                <a href="javascript:void(0);" class="search-icon pa"><i class="fa fa-search"></i></a>
            </div>
            <div class="searchTips pa dn">
                <div class="searchReferral dn">
                    <div class="searchRecent">
                        <p class="title">最近搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                    <div class="searchHot">
                        <p class="title">热门搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);">大石头CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                </div>
                <div class="searchResult">
                    <ul class="d n">
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>123</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>designer</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>icon</a></li>
                        <li class="worker title">创作者</li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老师</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老板</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>boss</a></li>
                    </ul>
                    <div class="checkMore tac d n">
                        <a href="javascript:void(0);">查看全部搜索结果<i class="fa fa-angle-double-right"></i></a>
                    </div>
                    <!--缺省提示-->
                    <div class="emptyInfo tac dn">
                        <p class="tips">暂未找到您想要查找的作,去<a href="MoreWorker.html">分类</a>查找更多作者吧!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="SY-topRight fr">
            <ul class="clearfix">
                <li class="SY-create fr">
                    <a href="Post.html"><span>创作</span></a>
                </li>
                <li class="SY-userPic fr">
                    <a href="UserCenter.html">
                        <img class="br50" src="img/icons/person.png" alt="userPic">
                        <object><a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a></object>
                    </a>
                    <div class="pa tac fold">
                        <span class="pa trigon"></span>
                        <ul>
                            <li class="myPage"><a href="UserPageNew.html">我的研习社</a></li>
                            <li class="myPage"><a href="http://www.shenyecg.com" target="_blank">深夜学院</a></li>
                            <li class="authentication"><a href="CareerAuthen.html">深夜认证</a></li>
                            <li class="wallet"><a href="MyWallet.html">钱包</a></li>
                            <li class="setting"><a href="UserSetting.html">设置</a></li>
                            <li class="SY-exit">
                                <a href="javascript:void(0);"><i></i>退出</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="SY-regLog fr dn">
                    <a href="javascript:void(0);">注册</a>
                    <a href="javascript:void(0);">登录</a>
                </li>
                <li class="SY-notify fr">
                    <a href="Notify.html"><i></i><span class="num pa">99+</span></a>
                    <div class="pa fold">
                        <span class="pa trigon"></span>
                        <p class="topBox clearfix">
                            <span class="text fl">消息盒子</span>
                            <a href="javascript:void(0);" class="emptyBtn fr">清空</a>
                        </p>
                        <ul class="">
                            <li><a href="javascript:void(0);">[系统]管理员审核通过了你发表的原创作品《路人甲》</a></li>
                            <li><a href="javascript:void(0);">[私信]路人甲给你发来了1条私信</a></li>
                            <li><a href="javascript:void(0);">[通知]路人甲关注了你</a></li>
                        </ul>
                        <!--缺省提示-->
                        <div class="emptyInfo tac dn">
                            <p class="tips">暂无消息</p>
                        </div>
                        <div class="checkAll">
                            <a class="db tac" href="Notify.html">查看全部&nbsp;>></a>
                        </div>
                    </div>
                </li>
                <li class="fr line"></li>
                <li class="SY-focus dn fr">
                    <a href="UserCenter.html"><i></i><span>关注</span></a>
                </li>
                <li class="SY-Recruit fr">
                    <a href="Recruit.html"><i></i><span>招聘</span></a>
                    <span class="event db pa new"></span>
                </li>
                <li class="SY-piazza fr">
                    <a href="SquareNew.html"><i></i><span>广场</span></a>
                </li>
                <li class="SY-CG fr dn">
                    <a href="http://www.shenyecg.com" target="_blank"><i></i><span>学院</span></a>
                </li>
                <li class="SY-index fr dn">
                    <a href="Index.html"><i></i><span>首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部 结束-->

<!--主内容 开始-->
<div class="SY-content pr spread">
    <div class="SY-SettingBar pf">
        <div class="mainMenu pa">
            <ul>
                <li class="tac">
                    <a href="UserPage.html">
                        <div class="pic home"></div>
                        <p class="text">主页</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="Post.html" target="_self">
                        <div class="pic post"></div>
                        <p class="text">发布</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="Supporter.html">
                        <div class="pic support"></div>
                        <p class="text">支持者</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="Wallet.html">
                        <div class="pic wallet"></div>
                        <p class="text">钱包</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="Notification.html">
                        <div class="pic notification"></div>
                        <p class="text">通知</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="javascript:void(0);">
                        <div class="pic marketing"></div>
                        <p class="text">营销</p>
                    </a>
                </li>
                <li class="tac">
                    <a href="Invitation.html">
                        <div class="pic invite"></div>
                        <p class="text">邀请</p>
                    </a>
                </li>
                <li class="tac active">
                    <a href="javascript:void(0);">
                        <div class="pic setting"></div>
                        <p class="text">设置</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="secondMenu pa">
            <ul>
                <li class="active">
                    <a class="db" href="javascript:void(0);">个人主页</a>
                </li>
                <li class="">
                    <a class="db" href="javascript:void(0);">账号设置</a>
                </li>
                <li class="">
                    <a class="db" href="javascript:void(0);">提现支付</a>
                </li>
                <li class="">
                    <a class="db" href="javascript:void(0);">实名认证</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="SY-setContent">
        <!--个人主页设置-->
        <div class="SY-wrap">
            <div class="S-nav">
                <ul class="clearfix">
                    <li class="fl pr active"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                    <li class="fl pr"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                    <li class="fl pr"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                    <li class="fl pr"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                    <li class="fl pr"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                    <li class="fl pr"><a class="br50 db pa" href="javascript:void(0);"></a></li>
                </ul>
                <div class="navList">
                    <div class="item dib tac active"><a href="javascript:void(0);">基本信息</a></div>
                    <div class="item dib tac"><a href="javascript:void(0);">个人介绍</a></div>
                    <div class="item dib tac"><a href="javascript:void(0);">阶段目标</a></div>
                    <div class="item dib tac"><a href="javascript:void(0);">订阅项目</a></div>
                    <div class="item dib tac"><a href="javascript:void(0);">感谢信</a></div>
                    <div class="item dib tac"><a href="javascript:void(0);">完成发布</a></div>
                </div>
            </div>
            <div class="S-main clearfix">
                <div class="titleBox tac">
                    <h2 class="title">基本信息</h2>
                    <p class="text">设置你的创造者细节和要给别人一个绝好的第一印象</p>
                </div>
                <div class="content fl">
                    <!--基本信息-->
                    <div class="baseMsg">
                        <div class="step1 br5 border1">
                            <div class="nickName clearfix">
                                <div class="fl tal text">昵称</div>
                                <div class="fl inputBox pr disable">
                                    <input type="text" disabled placeholder="设置一个大家熟知您的昵称" onfocus="this.placeholder=''" onblur="this.placeholder='设置一个大家熟知您的昵称'">
                                    <span class="pa tips">0/10</span>
                                </div>
                            </div>
                            <div class="themeMsg clearfix">
                                <div class="fl tal text">主题内容</div>
                                <div class="fl inputBox pr">
                                    <input type="text" placeholder="">
                                    <span class="pa tips">0/20</span>
                                </div>
                            </div>
                        </div>
                        <div class="step2 br5 border1">
                            <div class="userPic clearfix">
                                <div class="fl msg">
                                    <p class="text">头像</p>
                                    <p class="txt">你的头像将出现在消息、列表等代表你个人信息的地方</p>
                                </div>
                                <div class="fl upload">
                                    <div class="dib pic br50">
                                        <img class="br50" src="img/icons/person.png" alt="">
                                    </div>
                                    <div class="dib detail">
                                        <div class="choose">
                                            <p class="text">JPG,GIF or PNG.文件大小不超过1024K</p>
                                        </div>
                                        <a class="db tac br5 transition pr" href="javascript:void(0);">
                                        立即上传
                                        <input type="file" class="pa">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="pageCover clearfix">
                                <div class="fl msg">
                                    <p class="text">主页封面</p>
                                    <p class="txt">这将出现在您个人主页的最上方，选择一张有意思的代表作更加吸引人</p>
                                </div>
                                <div class="fl upload">
                                    <div class="addPic tac pr">
                                        <a href="javascript:void(0);" class="pa tac dn">
                                            更换
                                            <input type="file" class="pa">
                                        </a>
                                        <a class="db pr btn" href="javascript:void(0);">
                                            <div class="icon"></div>
                                            <p class="text">添加一张主页封面（1900*550）</p>
                                            <input type="file" class="pa">
                                        </a>
                                        <div class="picture pa dn" style="background-image:url('https://cdna.artstation.com/p/assets/images/images/009/271/528/large/tony-holmsten-new-bridge-layout-tony04.jpg?1518041343')"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="step3 br5 border1">
                            <div class="carreer clearfix">
                                <div class="fl tal text">职业</div>
                                <div class="fl inputBox pr">
                                    <input type="text" placeholder="(如自由职业者、近期就职公司或模型师、原画师)" onfocus="this.placeholder=''" onblur="this.placeholder='(如自由职业者、近期就职公司或模型师、原画师)'">
                                    <span class="pa tips">0/10</span>
                                </div>
                            </div>
                            <div class="aboutMe clearfix">
                                <div class="fl tal text">关于我</div>
                                <div class="fl inputBox pr focus">
                                    <textarea></textarea>
                                    <span class="pa tips">(不能超过1000个字)</span>
                                </div>
                            </div>
                        </div>
                        <div class="step5 br5 border1">
                            <div class="textBox">
                                <p class="title">社交主页</p>
                            </div>
                            <div class="authentication">
                                <div class="authenMsg">
                                    <div class="clearfix">
                                        <div class="msgBox fl">
                                            <p class="msg">认证类型：<span>个人认证</span></p>
                                            <p class="msg">认证信息：<span>两点十分、产品经理、你的名字</span></p>
                                        </div>
                                        <div class="btnBox fr">
                                            <a class="br5 transition db" href="javascript:void(0);">解除认证</a>
                                        </div>
                                    </div>
                                    <p class="msg tac dn">还未拥有专属的认证称号哦，快去<a href="CareerAuthen.html">认证</a>吧！</p>
                                </div>
                            </div>
                        </div>
                        <div class="step4 br5 border1">
                            <div class="textBox">
                                <p class="title">社交主页</p>
                            </div>
                            <div class="listBox">
                                <div class="item dib clearfix">
                                    <div class="societyIcon fl sina"></div>
                                    <div class="inputBox fl pr">
                                        <input type="text" placeholder="请输入相关链接" onfocus="this.placeholder=''" onblur="this.placeholder='请输入相关链接'">
                                        <a class="pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                    </div>
                                </div>
                                <div class="item dib clearfix">
                                    <div class="societyIcon fl behance"></div>
                                    <div class="inputBox fl pr">
                                        <input type="text" placeholder="请输入相关链接" onfocus="this.placeholder=''" onblur="this.placeholder='请输入相关链接'">
                                        <a class="pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                    </div>
                                </div>
                                <div class="item dib clearfix">
                                    <div class="societyIcon fl artstation"></div>
                                    <div class="inputBox fl pr">
                                        <input type="text" placeholder="请输入相关链接" onfocus="this.placeholder=''" onblur="this.placeholder='请输入相关链接'">
                                        <a class="pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                    </div>
                                </div>
                                <div class="item dib clearfix">
                                    <div class="societyIcon fl qqZone"></div>
                                    <div class="inputBox fl pr">
                                        <input type="text" placeholder="请输入相关链接" onfocus="this.placeholder=''" onblur="this.placeholder='请输入相关链接'">
                                        <a class="pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="db tac transition br5 save" href="javascript:void(0);">保存信息</a>
                    </div>
                    <!--个人介绍-->
                    <div class="selfIntroduce dn">
                        <div class="main br5 border1">
                            <div class="textBox">
                                <h3 class="title">您是谁？您为什么要与支持者分享创作内容？</h3>
                                <p class="text">这段内容默认将在个人主页的头条以及关于我的介绍中，在这里通过文字 + 一段视频内容，充分展现自己，将极大提高对读者的吸引力。</p>
                            </div>
                            <div class="uploadVideo br5">
                                <div class="upload br5 dn">
                                    <div class="tac">
                                        <a class="db br5 transition tac pr" href="javascript:void(0);">
                                            上传个人介绍视频
                                            <input type="file" class="pa">
                                        </a>
                                        <p>（视频的格式什么的）</p>
                                    </div>
                                </div>
                                <div class="uploading br5 pr d n">
                                    <img class="pic d n" src="https://wx4.sinaimg.cn/large/006Tr4asgy1fp1x95yk9nj30fr08vteu.jpg" alt="">
                                    <div class="cover pa dn"></div>
                                    <div class="fileBox pa">
                                        <div class="fileProgress pr">
                                            <div class="fileProgress-txt pa clearfix">
                                                <div class="fileStatus fl">已上传<span>80%</span></div>
                                                <div class="fileTip pa tac"></div>
                                                <div class="fileTime fr">剩余<span class="time">1小时12小时30分20秒</span></div>
                                            </div>
                                            <a class="fileCancel pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                            <div class="fileProgressRecord pa">
                                                <div class="fileProgress-txt pa clearfix">
                                                    <div class="fileStatus fl">已上传<span>80%</span></div>
                                                    <div class="fileTip pa tac"></div>
                                                    <div class="fileTime fr">剩余<span class="time">1小时12小时30分20秒</span></div>
                                                </div>
                                                <a class="fileCancel pa" href="javascript:void(0);"><i class="fa fa-close"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="renew pa">
                                        <a class="db tac pr" href="javascript:void(0);">
                                            重新上传
                                            <input type="file" class="pa">
                                        </a>
                                    </div>
                                    <video controls>
                                        <source src="http://vod1.yiihuu.com/vod/video_mp4/ad/6470_20180102.mp4">
                                    </video>
                                </div>
                            </div>
                            <div class="writeWods br5 border1">
                                <!--<div class="editControlrs clearfix">
                                    <div class="fl clearfix fontSize pr">
                                        <a class="fl dib" href="javascript:void(0);"><i class="fa fa-header"></i></a>
                                        <div class="menuList br5 pa">
                                            <ul style="height:auto;">
                                                <li style="font-size: 26px;"><a href="javascript:void(0);">大标题</a></li>
                                                <li style="font-size: 22px;"><a href="javascript:void(0);">小标题</a></li>
                                                <li style="font-size: 16px;"><a href="javascript:void(0);">正文</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <p class="fl clearfix fontStyle">
                                        <a class="fl dib" data-role="bold" href="javascript:void(0);"><i class="fa fa-bold"></i></a>
                                        <a class="fl dib" data-role="italic" href="javascript:void(0);"><i class="fa fa-italic"></i></a>
                                        <a class="fl dib" data-role="underline" href="javascript:void(0);"><i class="fa fa-underline"></i></a>
                                        <a class="fl dib" data-role="strikeThrough" href="javascript:void(0);"><i class="fa fa-strikethrough"></i></a>
                                    </p>
                                    <p class="fl clearfix textAlign">
                                        <a class="fl dib active" data-role="justifyLeft" href="javascript:void(0);"><i class="fa fa-align-left"></i></a>
                                        <a class="fl dib" data-role="justifyCenter" href="javascript:void(0);"><i class="fa fa-align-center"></i></a>
                                        <a class="fl dib" data-role="justifyRight" href="javascript:void(0);"><i class="fa fa-align-right"></i></a>
                                    </p>
                                    <p class="fl clearfix listStyle">
                                        <a class="fl dib" data-role="insertUnorderedList" href="javascript:void(0);"><i class="fa fa-list-ul"></i></a>
                                        <a class="fl dib" data-role="insertOrderedList" href="javascript:void(0);"><i class="fa fa-list-ol"></i></a>
                                    </p>
                                    <p class="fl clearfix blockquote">
                                        <a class="fl dib" href="javascript:void(0);"><i class="fa fa-quote-left"></i></a>
                                    </p>
                                    <p class="fl clearfix pic">
                                        <a class="fl dib pr" href="javascript:void(0);">
                                            <i class='fa fa-picture-o'></i>
                                            <input type="file" class="pa">
                                        </a>
                                    </p>
                                    <p class="fl clearfix link">
                                        <a class="fl dib" href="javascript:void(0);"><i class="fa fa-link fa-rotate-90"></i></a>
                                    </p>
                                </div>-->
                                <div class="main_toolbar clearfix">
                                    <div class="main_toolbar_inner">
                                        <div class="pos fl">
                                            <ul class="dib clearfix">
                                                <li class="row">
                                                    <ul class="clearfix" style="border-left: 0;">
                                                        <li class=""><a href="javascript:void(0);" data-role='bold' title="加粗" class="S_icon icon_bold"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='italic' title="斜体" class="S_icon icon_italic"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='strikeThrough' title="删除线" class="S_icon icon_linethrough"><i></i></a></li>
                                                        <li class="more">
                                                            <a href="javascript:void(0);" title="应用颜色" class="ico"><i class="S_icon icon_color" style="border-bottom:3px solid #333333;"></i></a>
                                                            <a href="javascript:void(0);" title="选择颜色" class="opt"><i class="S_icon fa fa-caret-down"></i></a>
                                                            <div class="S_layer dn pa">
                                                                <div class="content pr">
                                                                    <div class="layer_color">
                                                                        <h2><span><i style="background: #333;"></i></span>去除颜色</h2>
                                                                        <div>
                                                                            <h3>标准色</h3>
                                                                            <ul class="clearfix">
                                                                                <li><a href="javascript:void(0);"><i style="background:#717071"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#c9c9c9"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#ff8a78"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#fec467"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#7cd7a3"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#5bc9ea"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#c893eb"></i></a></li>
                                                                            </ul>
                                                                            <h3>主题颜色</h3>
                                                                            <ul class="clearfix" style="height:auto;">
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#333333"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#717071"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#b5b5b5"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#808080"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#c9c9c9"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#e3e3e3"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#d24a35"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#ff8a78"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#ffc3b9"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#d49225"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#fec467"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#fee0b1"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#42ac6f"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#7cd7a3"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#bbeacf"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#1f9dc4"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#5bc9ea"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#aae3f4"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#9053b9"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#c893eb"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#e2c7f4"></i></a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="more2">
                                                            <a href="javascript:void(0);" title="选择字号" class="S_select"><span>正文</span><i class="S_icon fa fa-caret-down pa"></i></a>
                                                            <div class="layer_menu_list dn pa">
                                                                <ul style="height:auto;">
                                                                    <li style="font-size:26px"><a href="javascript:void(0);">大标题</a></li>
                                                                    <li style="font-size:22px"><a href="javascript:void(0);">小标题</a></li>
                                                                    <li style="font-size:16px"><a href="javascript:void(0);">正文</a></li>
                                                                </ul>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class=""><a href="javascript:void(0);" data-role='insertOrderedList' title="有序列表" class="S_icon icon_ol"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='insertUnorderedList' title="无序列表" class="S_icon icon_ul"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class="curr"><a href="javascript:void(0);" data-role='justifyLeft' title="居左" class="S_icon icon_tl"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='justifyCenter' title="居中" class="S_icon icon_tc"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='justifyRight' title="居右" class="S_icon icon_tr"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class=""><a href="javascript:void(0);" title="引用" class="S_icon icon_blockquote"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="分割线" class="S_icon icon_line"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix" style="overflow:hidden">
                                                        <li class=""><a href="javascript:void(0);" title="插入图片" class="S_icon icon_image"><i><input type="file"></i></a></li>
                                                        <li class="dn"><a href="javascript:void(0);" title="插入视频" class="S_icon icon_video"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="插入链接" class="S_icon icon_link"><i></i></a></li>
                                                        <li class="dn"><a href="javascript:void(0);" title="插入商品" class="S_icon icon_commodity"><i></i></a></li>
                                                        <li class="dn"><a href="javascript:void(0);" title="插入电影" class="S_icon icon_filmreview"><i></i></a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="editor" contenteditable="true"></div>
                            </div>
                        </div>
                        <a class="db tac transition br5 save" href="javascript:void(0);">保存信息</a>
                    </div>
                    <!--阶段目标-->
                    <div class="target dn">
                        <div class="main br5 border1">
                            <div class="textBox">
                                <h3 class="title">您的阶段目标是什么？</h3>
                                <p class="text">您可以创建多个合理的阶段目标，告知您的关注者，当获得更多的支持时，您将还会做什么？</p>
                            </div>
                            <div class="newTargetList"></div>
                            <a class="db tac addMore" href="javascript:void(0);">
                                <i class="fa fa-plus"></i>继续创建
                            </a>
                        </div>
                    </div>
                    <!--订阅项目-->
                    <div class="reward dn">
                        <div class="main br5 border1">
                            <div class="textBox">
                                <h3 class="title">你想带给你的支持者回馈什么？</h3>
                                <p class="text">奖励是你对支持者的回馈以及承诺，你的支持者将每月付费订阅你创作的内容，建议你创作擅长的内容，并保证周期性的更新，让支持者有动力持续订阅。你可以创建至少一个奖励，多个等级，对应不同深度的付费内容。</p>
                            </div>
                            <div class="tabNav clearfix">
                                <div class="fl tabBtn br5 border1">
                                    <a class="dib all active" href="javascript:void(0);">全部</a>
                                    <span class="line dib"></span>
                                    <a class="dib published" href="javascript:void(0);">已发布</a>
                                    <span class="line dib"></span>
                                    <a class="dib shield" href="javascript:void(0);">已屏蔽</a>
                                </div>
                                <div class="fr">
                                    <a class="createBtn br5 tac db transition" href="javascript:void(0);"><i class="fa fa-plus"></i>创建</a>
                                </div>
                            </div>
                            <!--缺省提示-->
                            <div class="emptyInfo tac dn">
                                <div class="icon"></div>
                                <p class="text">暂未创建订阅项目</p>
                            </div>
                            <div class="">
                                <div class="newReward br5 border1">
                                    <div class="topBox clearfix">
                                        <p class="fl title">项目一</p>
                                        <a href="javascript:void(0);" class="fr">设为屏蔽</a>
                                        <a href="javascript:void(0);" class="fr edit">编辑</a>
                                    </div>
                                    <div class="contentBox clearfix">
                                        <div class="fl">
                                            <div class="description">
                                                项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述
                                            </div>
                                            <p class="openTime">开放订阅时间：<span class="date">2018-04-12</span></p>
                                            <p class="peopleNum">限制人数：<span class="num">666</span></p>
                                            <p class="time">2018-03-06</p>
                                        </div>
                                        <div class="caption fr">
                                            <p class="price">￥26</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="newReward shield br5 border1">
                                    <div class="topBox clearfix">
                                        <p class="fl title">项目一</p>
                                        <a href="javascript:void(0);" class="fr">取消屏蔽</a>
                                        <a href="javascript:void(0);" class="fr edit">编辑</a>
                                    </div>
                                    <div class="contentBox clearfix">
                                        <div class="fl">
                                            <div class="description">
                                                项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述
                                            </div>
                                            <p class="openTime">开放订阅时间：<span class="date">2018-04-12</span></p>
                                            <p class="peopleNum">限制人数：<span class="num">666</span></p>
                                            <p class="time">2018-03-06</p>
                                        </div>
                                        <div class="caption fr">
                                            <p class="price">￥26</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="page tac">
                                <ul class="pageList pr clearfix">
                                    <li class="text disable"><a href="javascript:void(0);">首页</a></li>
                                    <li class="text disable"><a href="javascript:void(0);">上一页</a></li>
                                    <li class="pageActive"><a href="javascript:void(0);">1</a></li>
                                    <li><a href="javascript:void(0);">2</a></li>
                                    <li><a href="javascript:void(0);">3</a></li>
                                    <li><a href="javascript:void(0);">...</a></li>
                                    <li class="text"><a href="javascript:void(0);">下一页</a></li>
                                    <li class="text"><a href="javascript:void(0);">尾页</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--感谢信-->
                    <div class="letter dn">
                        <div class="main br5 border1">
                            <div class="textBox">
                                <h3 class="title">有什么需要对您的支持者说的呢？</h3>
                                <p class="text">向您的支持者表达您的感谢，同时给他们一个惊喜。当支持者付费支持您时，将看到您的感谢信。</p>
                            </div>
                            <div class="writeLetter br5 border1">
                                <textarea class="editor br5"></textarea>
                            </div>
                        </div>
                        <a class="db tac transition br5 save" href="javascript:void(0);">保存信息</a>
                    </div>
                    <!--完成发布-->
                    <div class="complete tac br5 border1 dn">
                        <p class="text">恭喜您，已经完成个人主页设置，</p>
                        <p class="text">现在您可以发布您的第一条内容啦！</p>
                        <a class="db tac br5 transition save" href="Post.html" target="_self">发布</a>
                    </div>
                </div>
                <div class="help border1 br5 fr">
                    <div class="main">
                        <div class="helpCenter" id="helpCenter">
                            <div class="baseMsg">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">完善的基本信息有助于获得良好的第一印象</a></li>
                                    <li><a href="javascript:void(0);">如何定位自己的主页主题内容？</a></li>
                                    <li><a href="javascript:void(0);">代表个人的主页封面更受欢迎</a></li>
                                </ul>
                            </div>
                            <div class="selfIntroduce dn">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">精心设计的个人介绍将有效提高关注</a></li>
                                    <li><a href="javascript:void(0);">如何创建一个受欢迎的个人介绍短视频？</a></li>
                                </ul>
                            </div>
                            <div class="target dn">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">什么是阶段目标？</a></li>
                                    <li><a href="javascript:void(0);">如何选择对你很重要的目标？</a></li>
                                    <li><a href="javascript:void(0);">我可以同时创建多个目标吗？</a></li>
                                    <li><a href="javascript:void(0);">我可以编辑或者删除我的目标吗？</a></li>
                                </ul>
                            </div>
                            <div class="reward dn">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">什么是奖励？</a></li>
                                    <li><a href="javascript:void(0);">每月付费与一口价的区别？</a></li>
                                    <li><a href="javascript:void(0);">视觉艺术家通常的奖励建议</a></li>
                                    <li><a href="javascript:void(0);">我可以编辑或者删除我的奖励吗？</a></li>
                                </ul>
                            </div>
                            <div class="letter dn">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">为支持您的粉丝设计一个感谢信</a></li>
                                </ul>
                            </div>
                            <div class="complete dn">
                                <div class="helpIcon feb"><i class="fa fa-question-circle"></i>小助手</div>
                                <ul>
                                    <li><a href="javascript:void(0);">发布你的第一篇文章</a></li>
                                    <li><a href="javascript:void(0);">如何让粉丝们知道我的研习社主页？</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--账号设置-->
        <div class="SY-wrap dn">
            <div class="S-account">
                <div class="accountBox border1 br5">
                    <div class="titleBox">账号设置</div>
                    <div class="settingBox">
                        <div class="modelBox clearfix cellPhone">
                            <div class="fl msg">
                                <div class="icon fl"></div>
                                <div class="detail fl">
                                    <h2>手机<span class="info warning">130****6683</span></h2>
                                    <p>可用手机号加密码登录，可通过手机号找回密码，无法绑定</p>
                                </div>
                            </div>
                            <div class="fr btnBox">
                                <a class="br5 border1 transition change" href="javascript:void(0);">更改</a>
                            </div>
                        </div>
                        <div class="modelBox clearfix email">
                            <div class="fl msg">
                                <div class="icon fl"></div>
                                <div class="detail fl">
                                    <h2>邮箱<span class="info warning">未绑定</span></h2>
                                    <p>可用邮箱加密码登录，可通过邮箱找回密码</p>
                                </div>
                            </div>
                            <div class="fr btnBox">
                                <a class="br5 border1 transition bind" href="javascript:void(0);">立即绑定</a>
                            </div>
                        </div>
                        <div class="modelBox clearfix password">
                            <div class="fl msg">
                                <div class="icon fl"></div>
                                <div class="detail fl">
                                    <h2>密码<span class="info">已设置</span></h2>
                                    <p>用于保护账号信息和登录安全</p>
                                </div>
                            </div>
                            <div class="fr btnBox">
                                <a class="br5 border1 transition change" href="javascript:void(0);">修改</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--提现支付-->
        <div class="SY-wrap dn">
            <div class="S-withdraw">
                <div class="withdrawBox border1 br5">
                    <div class="titleBox">提现支付</div>
                    <div class="settingBox">
                        <div class="modelBox clearfix payAccount">
                            <div class="fl msg">
                                <div class="icon fl"></div>
                                <div class="detail fl">
                                    <h2>支付宝账号<span class="info warning">130****6683</span></h2>
                                    <p>可用手机号加密码登录，可通过手机号找回密码，无法绑定</p>
                                </div>
                            </div>
                            <div class="fr btnBox">
                                <a class="br5 border1 transition change" href="javascript:void(0);">更改</a>
                            </div>
                        </div>
                        <div class="modelBox clearfix payPwd">
                            <div class="fl msg">
                                <div class="icon fl"></div>
                                <div class="detail fl">
                                    <h2>支付密码<span class="info warning">未设置</span></h2>
                                    <p>可用邮箱加密码登录，可通过邮箱找回密码</p>
                                </div>
                            </div>
                            <div class="fr btnBox">
                                <a class="br5 border1 transition bind" href="javascript:void(0);">立即设置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--实名认证-->
        <div class="SY-wrap dn">
            <div class="S-identification">
                <div class="indentificateBox border1 br5">
                    <div class="titleBox">实名认证</div>
                    <div class="settingBox">
                        <h2 class="title feb">认证须知</h2>
                        <div class="content br5">
                            <p class="text">1、实名认证可以提升你在深夜学院的个人信息及虚拟财产的安全等级，同时也能够更好的体验深夜学院的各项虚拟服务；</p>
                            <p class="text">2、我们将在你提交身份证信息后的5个工作日（不包含节假日）内完成审核，审核结果将会以短信和系统通知的形式发送给你；</p>
                            <p class="text">3、如若账号还未绑定手机，建议你提前绑定手机；</p>
                            <p class="text">4、实名认证审核完成后，将无法修改和删除，请谨慎填写；</p>
                            <p class="text">5、实名认证审核完成后，系统将自动发放10个积分作为奖励；</p>
                            <p class="text">6、你需要准备身份证照片（需正反两面），<span> 请确保证件照片清晰可见</span>，严禁PS；</p>
                            <p class="text">7、我们会确保你所提供的信息均处于严格的保密状态，不会泄露；</p>
                            <p class="text feb">8、如存在恶意乱填写姓名，身份证号码，及上传与身份证证件无关图片者，一经发现将冻结慕课网账号。</p>
                            <p class="text feb">9、<span>未实名认证将不能观看收费课程。(2018.01.01 正式施行)</span></p>
                        </div>
                        <a href="javascript:void(0);" class="db br5 tac transition validate">开始认证</a>
                        <p class="wrongInfo tac">为什么没有认证成功</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容 结束-->
<script src="js/jquery.min.js"></script>
<script src="js/search.js"></script>
<script>
    $(function() {
        //编辑器
        $('.editControlrs a').click(function(e) {
            switch($(this).data('role')) {
                case 'p':
                case 'h1':
                case 'h2':
                    document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                    break;
                default:
                    document.execCommand($(this).data('role'), false, null);
                    break;
            }
        });

        //是否显示active状态
        $(".editControlrs .fontStyle a").click(function () {
            if($(this).hasClass("active") === true){
                $(this).removeClass("active");
            }else{
                $(this).addClass("active");
            }
        });

        $(".editControlrs .textAlign a").click(function () {
           if($(this).hasClass("active") === false){
               $(this).addClass("active");
               $(this).siblings().removeClass("active");
           }else{
               $(this).siblings().removeClass("active");
           }
        });

        $(".editControlrs .listStyle a").click(function () {
            if($(this).hasClass("active") === false){
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            }else{
                $(this).siblings().removeClass("active");
            }
        });

        //创建新的引用
        $(".editControlrs .blockquote a").click(function () {
            if($(this).hasClass("active") === false){
                $(this).addClass("active");
            }
            if($(".editor").find("blockquote").length == 0) {
                var newBlockQuote = $("<blockquote>&#8203;</blockquote>");
                $(".editor").append(newBlockQuote);
            }else{
                return;
            }
        })



    });
</script>
<script>
    $(function () {
        //左侧导航切换
        $(".SY-SettingBar .secondMenu li").click(function () {
            var indexNum = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".SY-setContent .SY-wrap").eq(indexNum).show().siblings().hide();
        });

        //个人主页设置导航切换
        $(".SY-setContent .SY-wrap .S-nav .item").click(function () {
            var indexTab = $(this).index();
            var titleBox = $(".SY-setContent .SY-wrap .S-main .titleBox");
            var title = titleBox.find(".title");
            var text = titleBox.find(".text");
            $(this).addClass("active").siblings().removeClass("active");
            $(this).parent().siblings().find("li").eq(indexTab).addClass("active").siblings().removeClass("active");
            $(".SY-setContent .S-main > .content > div").eq(indexTab).show().siblings().hide();
            $(".SY-setContent #helpCenter > div").eq(indexTab).show().siblings().hide();
            switch(indexTab) {
                case 0 :
                    title.html("基本信息");
                    text.html("设置你的创造者细节和要给别人一个绝好的第一印象");
                    break;
                case 1 :
                    title.html("个人介绍");
                    text.html("充分的展示自己，将极大提高对读者的吸引力");
                    break;
                case 2 :
                    title.html("阶段目标");
                    text.html("让关注者了解您的阶段目标，将有助于获得更多的支持者");
                    break;
                case 3 :
                    title.html("订阅项目");
                    text.html("订阅项目是您对支持者的回馈以及承诺，您的支持者将每月付费订阅您创作的内容");
                    break;
                case 4 :
                    title.html("感谢信");
                    text.html("向您的支持者表达您的感谢，同时给他们一个惊喜");
                    break;
                case 5 :
                    title.html("完成发布");
                    text.html("创建分享第一条免费内容，获得编辑推荐将收获更多关注者");
                    break;
            }
        });

        //个人主页设置 基本信息 输入框获取&失去光标事件
        $(".SY-wrap .content .baseMsg input").focus(function () {
            $(this).parent(".inputBox").addClass("focus");
        });
        $(".SY-wrap .content .baseMsg input").blur(function () {
            $(this).parent(".inputBox").removeClass("focus");
        });

        //创建新的阶段目标
        $(".SY-wrap .target .addMore").click(function () {
           var newTarget  = $("<div class='newTarget br5 border1'>" +
               "                  <div class='topBox clearfix'>" +
               "                     <p class='fl title'>新的目标</p>" +
               "                          <a href='javascript:void(0);' class='fr close' id='close'><i class='fa fa-close'></i></a>" +
               "                  </div>" +
               "                  <div class='writeBox'>" +
               "                     <div class='suppoter clearfix'>" +
               "                         <div class='fl text'>支持人数</div>" +
               "                         <div class='fl br5 border1 tac population' contenteditable='true'></div>" +
               "                     </div>" +
               "                     <div class='describe clearfix'>" +
               "                         <div class='fl text'>描述</div>" +
               "                         <div class='fl'>" +
               "                             <textarea class='br5 border1' placeholder='(当有100个人支持我时，我将会每天花一半的时间投入在高级CG模型内容创作)'></textarea>" +
               "                         </div>" +
               "                     </div>" +
               "                     <div class='btns'>" +
               "                         <a class='tac dib br5 transition border1 save' href='javascript:void(0);'>保存信息</a>" +
               "                         <a class='tac dib br5 transition border1 cancel' href='javascript:void(0);'>取消</a>" +
               "                     </div>" +
               "                  </div>" +
               "                </div>");
           $(".SY-wrap .target .newTargetList").append(newTarget);
        });
    })
</script>
</body>
</html>